﻿Vue.component('help', {
    template: '<div class="modal-mask scroll-modal" v-show="show" transition="modal">' +
        '<div class="modal-wrapper">' +
            '<div class="modal-container" style="width: 1175px">' +
                '<div class="modal-header">' +
                    '<h4 slot="header"><i class="fa fa-edit"></i>说明</h4>' +
                    '<em class="fa fa-close" @click="close()"></em>' +
                '</div>' +
                '<div class="modal-body">' +
                    '<div v-for="step in stepList" v-show="$index == showStep">' +
                        '<h2 v-text="step.title"></h2>' +
                        '<h3 v-text="step.content"></h3>' +
                        '<div style="text-align: center">' +
                            '<img style="max-width:1050px;" :src="step.url">' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<div class="modal-footer">' +
                        '<button class="btn" @click="previous()" v-show="showStep > 0">上一条</button>' +
                        '<button class="btn" @click="next()" v-show="showStep < stepList.length - 1">下一条</button>' +
                        '<button class="btn" @click="close()" v-show="showStep == stepList.length - 1">关闭</button>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>',
    props: {
        show: {
            type: Boolean,
            required: true,
            twoWay: true
        },
        stepList: {
            type: Array,
            required: true,
        }
    },
    ready: function () {
        if (typeof this.init === 'function') {
            this.init();
        }
    },
    data: function () {
        return {
            showStep: 0
        }
    },
    methods: {
        close: function () {
            if (typeof this.beforeClose === 'function') {
                if (this.beforeClose() === false) {
                    return;
                }
            }
            this.show = false;
        },
        previous: function () {
            this.showStep--
        },
        next: function () {
            this.showStep++
        },
        init: function () {
            this.$watch('show', function (newVal, oldVal) {
                if (newVal) {
                    $('body').addClass('modal-open');
                } else {
                    $('body').removeClass('modal-open');
                }
            });
        },
        beforeClose: function () {
            this.showStep = 0;
        }
    }
});

Vue.component('tab', {
    template:
        ' <div class="finance-tab">' +
            '<ul class="finance-tab-hd other">' +
                '<li class="current">权限申请</li>' +
                '<li>流程说明</li>' +
                '<li>相关制度</li>' +
                '<li>常见问题</li>' +
            '</ul>' +
            '<div class="finance-tab-cont">' +
                '<div class="finance-tab-item">' +
                    '<div class="content">' +
                        '<ul class="question-and-answer">' +
                            '<li v-for="item in contentObj.rigthList">' +
                                '<p class="question" v-if="item.question" v-text="item.question"></p>' +
                                '<p class="answer" v-html="item.answer"></p>' +
                                '<p class="download" v-if="item.download">4. 邮件模板：<a v-bind:href="item.download">下载</a></p>' +
                                '<img v-if="item.imgUrl" v-bind:src="item.imgUrl">' +
                            '</li>' +
                        '</ul>' +
                        '<div class="right-help">' +
                            '<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=2885225749&amp;site=qq&amp;menu=yes" target="_blank">' +
                                '<h4>咨询 QQ<img src="/bx/Content/static/img/startqq.png" border="0" alt="点击获取更多帮助" title="点击获取更多帮助"></h4>' +
                                '<p>请点击上面图标打开企业QQ对话框</p>' +
                            '</a>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<div class="finance-tab-item table-item none">' +
                    '<div class="tips" v-if="btnList.length" style="color:#f60;">点击蓝色按钮查看具体操作说明。</div>' +
                    '<div v-for="item in btnList" class="fade-btn {{item.btnClass}}" v-on:click="item.callBack()" v-text="item.name" title="点击查看操作说明"></div>' +
                    '<div class="content">' +
                        '<table class="{{classType}}">' +
                            '<tr>' +
                                '<th colspan="2">申请流程</th>' +
                                '<th>审核/流转</th>' +
                                '<th>备注</th>' +
                            '</tr>' +
                           ' <tr>' +
                               ' <td>' +
                                    '申请部门' +
                                '</td>' +
                                '<td>' +
                                '</td>' +
                                '<td></td>' +
                                '<td>' +
                                   ' <p>' +
                                       ' <p v-for="item in contentObj.remark.first.list" v-text="item"></p>' +
                                       ' <br v-for="item in contentObj.remark.first.breakCount" track-by="$index"/>' +
                                   ' </p>' +
                               ' </td>' +
                            '</tr>' +
                            '<tr>' +
                                '<td>财务总账费用部</td>' +
                                '<td></td>' +
                               ' <td></td>' +
                                '<td>' +
                                   ' <p>' +
                                         '<p v-for="item in contentObj.remark.second.list" v-text="item"></p>' +
                                         '<br v-for="item in contentObj.remark.second.breakCount" track-by="$index"/>' +
                                    '</p>' +
                                '</td>' +
                            '</tr>' +
                            '<tr>' +
                                '<td>财务资金部</td>' +
                                '<td></td>' +
                               ' <td></td>' +
                                '<td>' +
                                    '<p>' +
                                       ' <p v-for="item in contentObj.remark.third.list" v-text="item"></p>' +
                                       ' <br v-for="item in contentObj.remark.third.breakCount" track-by="$index"/>' +
                                    '</p>' +
                                '</td>' +
                            '</tr>' +
                        '</table>' +
                    '</div>' +
                '</div>' +
                '<div class="finance-tab-item none">' +
                    '<div class="content">' +
                        '<ul class="system">' +
                            '<li v-for="item in contentObj.systemList">' +
                                '<a v-bind:href="item.url" v-bind:title="item.name" target="_blank" v-text="item.name"></a>' +
                            '</li>' +
                        '</ul>' +
                    '</div>' +
                '</div>' +
                '<div class="finance-tab-item none">' +
                    '<div class="content">' +
                        '<ul class="question-and-answer">' +
                            '<li v-for="item in contentObj.QAList">' +
                                '<p class="question" v-text="item.question"></p>' +
                                '<p class="answer" v-text="item.answer"></p>' +
                            '</li>' +
                        '</ul>' +
                        '<ul class="connect">' +
                            '<li>' +
                                '<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=2885193465&amp;site=qq&amp;menu=yes" target="_blank">' +
                                    '<h4>吐槽小财<img src="/bx/Content/static/img/startqq.png" border="0" alt="点击这里给小财发消息" title="点击这里给小财发消息"></h4>' +
                                    '<p>请点击上面图标打开企业QQ对话框</p>' +
                                '</a>' +
                            '</li>' +
                            '<li>' +
                                '<a href="http://livechat.ly.com/inner/robotservice?p=28" target="_blank" title="点击这里咨询小财通">' +
                                    '<div style="float: left">' +
                                        '<img src="/bx/Content/static/img/smallTenpay.png">' +
                                        '<p>小财通 帮您忙</p>' +
                                    '</div>' +
                                '</a>' +
                            '</li>' +
                        '</ul>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>',
    props: {
        contentObj: Object,
        btnList: {
            type: Array,
            required: false,
            default: function () {
                return [];
            }
        }
    },
    computed: {
        classType: function () {
            switch (this.contentObj.type) {
                case 1:
                    return 'expense';//费用
                    break;
                case 2:
                    return 'travel';//差旅
                    break;
                case 3:
                    return 'borrow';//借款
                    break;
                case 4:
                    return 'repay';//还款
                    break;
                case 5:
                    return 'pay';//费用支付
                    break;
                case 6:
                    return 'take';//预提
                    break;
                case 7:
                    return 'salary';//薪资
                    break;
                case 8:
                    return 'executive';//行政
                    break;
                case 9:
                    return 'jd';//京东
                    break;
                case 10:
                    return 'invoice';//发票
                    break;
                default:
                    return '';

            }
        }
    }
});